
<template>
    <view class="drag-container">
        <basic-drag v-model="list" itemKey="title" :column="1" itemHeight="40px" @end = 'endList'>
            <template #item="{element}">
                         <!-- //注：小程序不能使用插槽这样进行使用，需在BasicDrag里面写入需要展示的item -->
            <view class="drag-item">{{ element.title }}</view>
            </template>
        </basic-drag>
    </view>
</template>

<script>
import BasicDrag from '@/components/basic-drag/index.vue';
export default {
    components: { BasicDrag },
    data() {
        return {
            list: [{ title: '学习' }, { title: '游戏' }, { title: '自驾' }, { title: '旅游' }, { title: '学习3' }, { title: '游戏4' }, { title: '自驾4' }, { title: '旅游4' }, { title: '考公1' },{ title: '学习1' }, { title: '游戏1' }, { title: '自驾1' }, { title: '旅游1' }, { title: '考公2' },{ title: '学习2' }, { title: '游戏2' }, { title: '自驾2' }, { title: '旅游2' }, { title: '考公3' }],
        };
    },
	methods:{
		endList(e){
			console.log('新列表',e);
		}
	}
};
</script>
<style>
	
</style>